<template>
  <view class="changeInfo">
    <view class="nav-box">
      <view class="title">编辑个人资料</view>
      <view
        open-type="switchTab"
        url="/pages/personal/personal"
        class="iconfont iconfanhui icon-nav"
      ></view>
    </view>
    <view class="box">
      <view class="position-relative mohu">
        <image
          :src="user.img"
          class="indistinct w-100"
          style="height: 259rpx"
          mode="aspectFill"
        ></image>
      </view>
      <view class="img-box">
        <image class="img" :src="user.img" @click="chooseImg"></image>
        <view class="text">点击更换头像</view>
      </view>
    </view>
    <view class="info-box">
      <view open-type="redirect" @tap="nichen('修改名字', user.username)" class="text-box">
        <view class="left">昵称</view>
        <view class="iconfont iconchangyongicon- icon-box"></view>
        <view class="right"
          >{{ user.username }} <text class="icon iconfont icon-youjiantou"></text
        ></view>
      </view>
      <view open-type="redirect" @tap="nichen('修改手机号', user.phone)" class="text-box">
        <view class="left">手机号</view>
        <view class="iconfont iconchangyongicon- icon-box"></view>
        <view class="right"
          >{{ user.phone }} <text class="icon iconfont icon-youjiantou"></text
        ></view>
      </view>
      <!-- <view open-type="redirect" url="/pages/modify/modify?title=intrduction" class="text-box">
        <view class="left">简介</view>
        <view class="iconfont iconchangyongicon- icon-box"></view>
        <view class="right">{{ user.intrduction }}</view>
      </view> -->

      <view class="text-box" @tap="nichen('修改地址', user.path)">
        <view class="left">地址</view>
        <view class="iconfont iconchangyongicon- icon-box"></view>
        <view class="right"
          >{{ user.path }} <text class="icon iconfont icon-youjiantou"></text
        ></view>
      </view>

      <view class="text-box" @tap="nichen('修改邮箱', user.email)">
        <view class="left">邮箱</view>
        <view class="iconfont iconchangyongicon- icon-box"> </view>
        <view class="right"
          >{{ user.email }} <text class="icon iconfont icon-youjiantou"></text
        ></view>
      </view>

      <!-- <picker mode="date" :value="user.birthday" @change="bindDateChange">
        <view class="text-box">
          <view class="left">生日</view>
          <view class="iconfont iconchangyongicon- icon-box"></view>
          <view class="right">{{ user.birthday }}</view>
        </view>
      </picker>
      <picker mode="region" @change="bindCityChange">
        <view class="text-box">
          <view class="left">地区</view>
          <view class="iconfont iconchangyongicon- icon-box"></view>
          <view class="right">{{ user.city }}</view>
        </view>
      </picker> -->
    </view>
  </view>
  <view>
    <!-- 输入框示例 -->
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        :title="titie"
        :value="value11"
        placeholder="请输入内容"
        @confirm="dialogInputConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { guanzhuStore, myStore } from '@/stores'
// import uniPopup from '@/components/components/uni-popup/uni-popup'
// import uniPopupDialog from '@/components/components/uni-popup-dialog/uni-popup-dialog'
import { editMyDataAPI } from '@/services/my copy'
// import { getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance()
const user = myStore()
export default {
  data() {
    return {
      titie: '输入内容11',
      value11: '',
      user: {
        email: '',
        phone: '',
        img: '',
        username: '',
        path: '',
      },
      user1: {},
    }
  },

  // 注册组件

  methods: {
    async chooseImg() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        sizeType: ['original', 'compressed'],
        success: async (res) => {
          this.user.img = res.tempFilePaths
          // #ifdef MP-WEIXIN
          uni.uploadFile({
            url: '/api/Img2', // 请求地址/hospital/user/updateAvatar
            filePath: res.tempFilePaths[0], // 临时文件路径
            name: 'avatarfile', // 文件对应的key值
            header: {
              type: 'client',
              // 需要带的请求头，token等等
              'content-type': 'multipart/form-data',
            },
            success: async (res) => {
              // 成功后的回调
              this.user.img = res.data
              console.log(res.data, '修改成功')
              //修改本地缓存数据

              console.log(this.user1, 'xiugaiqqqqqq')
              this.user1.picAddress = this.user.img
              user.setuserinfo(this.user1)
              let res1 = await editMyDataAPI({ img: this.user.img, user: user.userinfo })
            },
          })
          // #endif
        },
      })
    },
    nichen(data, user11) {
      console.log(user11)
      this.titie = data
      this.value11 = user11
      console.log(this.$refs.inputDialog, '哈哈哈')
      if (data != '修改名字') {
        this.$refs.inputDialog.open()
      } else {
        // 提示暂时不提供修改名字功能
        uni.showToast({
          title: '暂时不提供修改名字功能',
          icon: 'none',
          duration: 2000,
        })
      }
    },
    async dialogInputConfirm(data) {
      console.log(data, '修改了')

      if (data.title == '修改名字') {
        this.user.username = data.val
      } else if (data.title == '修改手机号') {
        this.user.phone = data.val
        //修改本地缓存数据

        console.log(this.user1, 'xiugaiqqqqqq')
        this.user1.phone = data.val
        user.setuserinfo(this.user1)
        let res = await editMyDataAPI({ phone: this.user.phone, user: user.userinfo })

        console.log(res, '手机号')
        console.log(this.user1, 'xiugai')
      } else if (data.title == '修改地址') {
        this.user.path = data.val
        let res = await editMyDataAPI({ path: this.user.path, user: user.userinfo })
      } else if (data.title == '修改邮箱') {
        this.user.email = data.val
        //修改本地缓存数据

        this.user1.email = data.val
        user.setuserinfo(this.user1)
        let res = await editMyDataAPI({ email: this.user.email, user: user.userinfo })
        console.log(res, '邮箱')
      }
    },
  },
  onLoad(e) {
    console.log(e)
    uni.setNavigationBarTitle({
      title: '个人资料',
    })
    const obj = JSON.parse(e.gerenail)
    console.log(obj)
    this.user.email = user.userinfo.email
    this.user.phone = user.userinfo.phone
    this.user.username = obj.username
    this.user.img =  obj.picAddress
    this.user.path = obj.path
    this.user1 = user.userinfo
  },
}
</script>

<style>
@import url('../../static/assets/wxss/iconfont.css');

.changeInfo {
  width: 100%;
  height: 1400rpx;
  background: #f7eeee;
}
.nav-box {
  height: 100rpx;
  position: relative;
  /* 字体垂直居中 */
  line-height: 0%;
  margin: 0 auto;
  padding-top: 60rpx;
}
.title {
  text-align: center;
  color: #222020;
  font-size: 36rpx;
}
.icon-nav {
  position: absolute;
  top: 60rpx;
  left: 20rpx;
  color: #ffffff;
}
.box {
  width: 100%;
  height: 300rpx;
  margin: 0 auto;
  border-top: 2rpx solid #333333;
  border-bottom: 2rpx solid #333333;
}
.img-box {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 10%;
  text-align: center;
}
.img {
  margin-top: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.text {
  margin-top: 26rpx;
  color: #2c2929;
  font-size: 26rpx;
}
.info-box {
  z-index: 99999;
  padding: 0 20rpx;
}
.text-box {
  width: 100%;
  height: 104rpx;
  /* line-height: 104rpx; */
}
.left {
  float: left;
  font-size: 30rpx;
  color: #343131;
}
.right {
  float: right;
  font-size: 30rpx;
  margin-right: 14rpx;
  color: #999999;
}
.icon-box {
  float: right;
  font-size: 30rpx;
  color: #999999;
  width: 20rpx;
}
.mohu {
  -webkit-filter: blur(40rpx);
  filter: blur(16rpx);
}
</style>
